<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
      var box = document.getElementById("box");
      var childen = box.getElementsByTagName("div");

      // jQuery的写法
      // $("#box>div:odd").css("background", "green");
      // $("#box>div:even").css("background", "blue");

      // 写法一
      // for (var i = 0; i < childen.length; i++) {
      //   if (i % 2 == 0) {
      //     childen[i].style.background = "red";
      //   } else {
      //     childen[i].style.background = "yellow";
      //   }
      // }

      // 写法二
      // for (var i = 0; i < childen.length; i++) {
      //   i % 2
      //     ? (childen[i].style.background = "red")
      //     : (childen[i].style.background = "green");
      // }

      // 写法三
      for (var i = 0; i < childen.length; i++) {
        childen[i].style.background = i % 2 ? "pink" : "red";
      }
    </script>
  </body>
</html>
